<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript"></script>
    <script src="./bootstrap/js/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="./bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="container" id="box">
        <form role="form">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" class="form-control" v-model="username" id="username" placeholder="请输入用户名"/>
            </div>
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="text" class="form-control" v-model="age" id="age" placeholder="请输入年龄"/>
            </div>
            <div class="form-group">
                <input type="button" class="btn btn-info" value="添加" v-on:click="add">
                <input type="reset" class="btn btn-danger" value="重置">
            </div>
        </form>

        <hr/>

        <table class="table table-bordered table-hover">
            <caption class="h3 text-info text-center">用户信息表</caption>
            <tr class="text-info">
                <th class="text-center">序号</th>
                <th class="text-center">姓名</th>
                <th class="text-center">年龄</th>
                <th class="text-center">操作</th>
            </tr>
            <tr class="text-center" v-for="item in myData">
                <td>{{$index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index" >删除</button>
                </td>
            </tr>


            <tr v-show="myData.length!=0">
                <td colspan="4" class="text-right">
                    <!--<input type="checkbox" class="form-control checkbox-inline">-->
                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">删除全部</button>
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="4" class="text-center text-info">
                   <p>暂无数据……</p>
                </td>
            </tr>
        </table>

        <!--模态框-->
        <div class="modal fade" id="layer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{{nowIndex==-2?"确认删除全部吗？":"确认删除吗？"}}</h4>
                    </div>
                    <div class="modal-body text-right">
                        <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="delete(nowIndex)">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    window.onload=function(){
        var vm = new Vue({
            el:"#box",
            data:{
                myData:[],
                username:'',
                age:'',
                nowIndex:'',

            },
            methods:{
                add:function(){
                   this.myData.push({
                       name:this.username,
                       age:this.age
                   });
                    this.username='';
                    this.age='';
                },
                delete:function(index){
                    if(index==-2){
                        this.myData = [];
                    }else{
                        this.myData.splice(index,1)
                    }

                },

            }
        })
    }
</script>
</body>
</html>